<!-- 货物类型组件 -->
<template>
    <view class="car-type-select">
        <picker @change="bindPickerChange" :value="index" :range="classification" range-key="title">
            <view class="u-flex u-flex-center">
                <view class="uni-input">{{ textComputed }}</view>
                <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png" mode="">
                </image>
            </view>
        </picker>
    </view>
</template>
<script>
export default {
    props: ['text','id'],
    data () {
        return {
            lang: this.$i18n.locale,
            index: 0,
            classification: [ //产品名数组
                {
                    id: 1,
                    title: this.$t('中国货物'),
                    url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
                },
                {
                    id: 2,
                    title: this.$t('俄罗斯货物'),
                    url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
                },
                {
                    id: 3,
                    title: this.$t('在俄中国货物'),
                    url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
                },
                {
                    id: 4,
                    title: this.$t('在中俄罗斯货物'),
                    url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
                },
            ],
        }
    },
    mounted () {
    },
    watch: {
    },
    computed: {
        textComputed () {
            return this.classification.find(item => item.id == this.id)?.title || this.text
        }
    },
    methods: {
        bindPickerChange (e) {
            this.index = e.target.value;
            this.$emit('change', this.classification[this.index]);
        }
    },
}
</script>

<style lang="less" scoped>
.car-type-select {
    width: 100%;
    height: 100%;

    .uni-input {
        color: #999999;
    }
}
</style>
